<template>
	<view class="content">
		<!-- 头部搜索模块 -->
		<view class="top-search share">
			<image class="left" @click="backHome" src="../../static/left.svg" mode="scaleToFill"></image>
			<view class="search-box">
				<image class="search" @click="searchKey()" src="../../static/srh.svg" mode=""></image>
				<input class="inp" focus @confirm="searchKey()" type="text" placeholder="请输入搜索内容" v-model="keyValue" @input="getValue" />
			</view>
			<text @click="backHot">取消</text>
		</view>
		<!-- /头部搜索模块 -->

		<!-- 大家都在搜模块 -->
		<view class="hotKey share" v-show="showChange">
			<view class="key-tab">
				<text>大家都在搜</text>
				<image src="../../static/lajitong.png" mode="widthFix"></image>
			</view>
			<view class="keywords">
				<view @click="searchKey(item.ci)" v-for="(item, index) in hotContent" :key="index">
					{{item.ci}}
				</view>
			</view>
		</view>
		<!-- /大家都在搜模块 -->

		<!-- 搜索结果模块 -->
		<view class="search-result" v-show="!showChange">
			<!-- 切换栏模块 -->
			<view class="tab-ul">
				<text @click="getChange(index)" class="tab-list " :class="{ active: isActive == index}" v-for="(item, index) in tabList" :key="index">
				{{item}}
				</text>
			</view>
			<!-- /切换栏模块 -->

			<!-- 全部内容模块 -->
			<view class="show-all" v-show="showMore == 0">
				<!-- 服务内容 -->
				<view class="search-service " v-show="fuwuContent.length !== 0">
					<view class="search-content share">
						<view class="service-title">
							<text>{{inputValue}}</text> - <text>服务</text>
						</view>
					</view>
					<view class="search-li share" v-show="index < 3" v-for="(item, index) in fuwuContent" :key="index">
						<view>
							<image class="icon" src="../../static/icon.jpg" mode=""></image>
							<view class="high-light" v-html="highLight(item.title)"></view>
						</view>
						<view class="enter">一键进入<image class="arrow-right" src="../../static/right.svg" mode=""></image>
						</view>
					</view>
					<view class="to-more" @click="intoMore(1)">
						<text>更多</text>
						<image src="../../static/right.svg" class="arrow-right" mode=""></image>
					</view>
				</view>
				<!-- /服务内容 -->

				<!-- 资讯内容 -->
				<view class="search-zixun" v-show="zixunContent.length !== 0 ">
					<view class="search-content share">
						<view class="title-left">
							<text>{{inputValue}}</text> - <text>资讯</text>
						</view>
						<view class="title-right">
							<view class="paixu-all" @click="showPai(1)">
								排序
								<image src="../../static/down.png" mode=""></image>
							</view>
							<view class="paixu" v-show="showPaixu == 1">
								<view @click="zixunPaiXu(index)" v-for="(item,index) in sortTab"
									:class="{lighting: zixunActive == index}" :key="index">
									{{item}}
								</view>
							</view>
						</view>
					</view>
					<view class="search-li share" v-show="index < 3" v-for="(item,index) in zixunContent" :key="index">
						<view class="zixun-content">
							<view class="high-light" v-html="highLight(item.title)"></view>
							<view>{{item.publictime}}</view>
						</view>
						<view class="-zixun-right">
							<image class="api-photo" :src="item.images" mode=""></image>
						</view>
					</view>
					<view class="to-more" @click="intoMore(2)">
						<text>更多</text>
						<image src="../../static/right.svg" class="arrow-right" mode=""></image>
					</view>
				</view>
				<!-- /资讯内容 -->

				<!-- 办事攻略内容 -->
				<view class="search-banshi " v-show="banshiContent.length !== 0 ">
					<view class="search-content share">
						<view class="title-left">
							<text>{{inputValue}}</text> - <text>办事攻略</text>
						</view>
						<view class="title-right">
							<view class="paixu-all" @click="showPai(2)">
								排序
								<image src="../../static/down.png" mode=""></image>
							</view>
							<view class="paixu" v-show="showPaixu == 2">
								<view @click="banshiPaiXu(index)" v-for="(item,index) in sortTab" :class="{lighting: banshiActive == index}" :key="index">
									{{item}}
								</view>
							</view>
						</view>
					</view>
					
					<view class="search-li share" v-show="index < 3" v-for="(item,index) in banshiContent" :key="index">
						<view class="banshi-content">
							<view class="high-light" v-html="highLight(item.title)"></view>
							<view class="banshi-des">
								<image class="doc" src="../../static/doc.jpg" mode=""></image>
								<text>{{item.guide}}</text>
							</view>
						</view>
					</view>
					
					<view class="to-more" @click="intoMore(3)">
						<text>更多</text>
						<image src="../../static/right.svg" class="arrow-right" mode=""></image>
					</view>
				</view>
				<!-- /办事攻略内容 -->

				<!-- 常见问题内容 -->
				<view class="search-question" v-show="quesContent.length !== 0 ">
					<view class="search-content share">
						<view class="title-left">
							<text>{{inputValue}}</text> - <text>常见问题</text>
						</view>
						<view class="title-right">
							<view class="paixu-all" @click="showPai(3)">
								排序
								<image src="../../static/down.png" mode=""></image>
							</view>
							<view class="paixu" v-show="showPaixu == 3">
								<view @click="questionPaiXu(index)" v-for="(item,index) in sortTab"
									:class="{lighting: questionActive == index}" :key="index">
									{{item}}
								</view>
							</view>
						</view>
					</view>
					<view class="question-li share" v-show="index < 3" v-for="(item,index) in quesContent" :key="index">
						<view>
							<view class="question-des">
								<image class="doc" src="../../static/wenhao.jpg" mode=""></image>
								<view class="high-light" v-html="highLight(item.title)"></view>
							</view>
							<view class="question-content">{{item.tag}}</view>
							<view class="question-time">2020-01-08 12:00</view>
						</view>
					</view>
					<view class="to-more" @click="intoMore(4)">
						<text>更多</text>
						<image src="../../static/right.svg" class="arrow-right" mode=""></image>
					</view>

				</view>
				<!-- /常见问题内容 -->
				<view class="none-content" v-show="showNone">
					输入有误
				</view>
			</view>
			<!-- /全部搜索模块 -->

			<!-- 服务模块 -->
			<service :inputValue="inputValue" ref="service" :fenci="fenci" :fuwuContent="fuwuContent"
				v-show="showMore == 1">
			</service>
			<!-- /服务模块 -->

			<!-- 资讯模块 -->
			<news :inputValue="inputValue" ref="news" :fenci="fenci" :zixunContent="zixunContent"
				v-show="showMore == 2"></news>
			<!-- /资讯模块 -->

			<!-- 办事攻略模块 -->
			<banshi :inputValue="inputValue" ref="banshi" :fenci="fenci" :banshiContent="banshiContent"
				v-show="showMore == 3">
			</banshi>
			<!-- /办事攻略模块 -->

			<!-- 常见问题模块 -->
			<question :inputValue="inputValue" ref="question" :fenci="fenci" :quesContent="quesContent"
				v-show="showMore == 4">
			</question>
			<!-- /常见问题模块 -->
		</view>
		<!-- /搜索结果模块 -->

		<!-- 返回主页按钮 -->
		<view class="back-home" @click="goTop">
			<image src="../../static/gohome.png" mode=""></image>
		</view>
		<!-- /返回主页按钮 -->
	</view>
</template>

<script>
	// 引入请求模块
	import {
		getFenci,
		getHotKey,
		getFuwu,
		getZixun,
		getBsRequest,
		getQuestion
	} from "../../utils/request.js"

	// 引入组件
	import service from "../../components/service.vue";
	import news from "../../components/news.vue";
	import banshi from "../../components/banshi.vue";
	import question from "../../components/question.vue";
	export default {
		components: {
			service,
			news,
			banshi,
			question
		},
		data() {
			return {
				tabList: ["全部", "服务", "资讯", "办事攻略", "常见问题"],
				sortTab: ["综合排序", "时间排序"],
				isActive: false,
				showChange: true,
				showNone: false,
				zixunActive: 0,
				banshiActive: 0,
				questionActive: 0,
				showPaixu: 0,
				showMore: 0,
				zixunContent: [],
				fuwuContent: [],
				banshiContent: [],
				quesContent: [],
				hotContent: [],
				fenci: [],
				inputValue: "",
				keyValue: "",
				keywords: "",
				city: ""
			}
		},

		onLoad() {
			// 请求热词搜索
			getHotKey(this.city.cityname)
			console.log("aiyo")
			console.log("aiyssso")
		},

		methods: {
			// 显示排序按钮
			showPai(value) {
				this.showPaixu == value ? this.showPaixu = 0 : this.showPaixu = value;
			},

			// 排序功能
			zixunPaiXu(index) {
				this.zixunActive = index;
				this.zixunActive === 0 ? this.getZixun() : this.getZixun("time");
			},
			banshiPaiXu(index) {
				this.banshiActive = index;
				this.banshiActive === 0 ? this.getBsRequest() : this.getBsRequest("time");
			},
			questionPaiXu(index) {
				this.questionActive = index;
				this.questionActive === 0 ? this.getQuestion() : this.getQuestion("time");
			},

			// 高亮
			highLight(value) {
				this.fenci.forEach((item) => {
					value = value.replace(new RegExp(item, "gi"), `<span style="color: #FF6600">${item}</span>`);
				})
				return value;
			},

			// 切换栏切换
			getChange(index) {
				this.isActive = index;
				this.showMore = index;
			},

			// 获取搜索框的值
			getValue(event) {
				this.inputValue = event.detail.value;
				if (this.inputValue == "") {
					this.showChange = true;
					this.showNone = false;
				}
			},

			// 返回顶部
			goTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			},

			// 点击更多,进入相对应标签
			intoMore(value) {
				this.showMore = value;
				this.isActive = value;
			},

			// 返回全部标签
			backHome() {
				this.showMore = 0;
				this.isActive == 0 ? uni.navigateBack({
					delta: 1
				}) : this.isActive = 0;
			},

			// 返回热词搜索界面
			backHot() {
				this.showChange = true;
				this.showNone = false;
				this.showMore = 0;
				this.isActive = 0;
				this.keyValue = "";
			},

			// 分词请求
			async getFenci() {
				let res = await request("fenci.php", {
					keywords: this.inputValue
				}, "GET");
				this.fenci = res.data;
				uni.setStorageSync("fenci", this.fenci);
			},

			// 服务模块请求
			async getFuwu(value) {
				let postData = {
					action: "tools",
					keywords: this.inputValue,
					city: this.city.cityname,
					type: "search",
					size: 10,
					ordertype: value
				}
				let postRes = await postRequest("service.php", postData, "POST");
				this.fuwuContent = postRes.data;
			},

			// 资讯请求
			async getZixun(value) {
				let getData = {
					citycode: this.city.citycode,
					action: "list",
					keywords: this.inputValue,
					pagesize: 10,
					ordertype: value
				}
				let getRes = await request("index.php", getData, "GET");
				this.zixunContent = getRes.data;
			},

			// 办事攻略请求
			async getBsRequest(value) {
				let getData = {
					citycode: this.city.citycode,
					action: "list",
					keywords: this.inputValue,
					pagesize: 10,
					bsy: 1,
					ordertype: value,
				}
				let getBsRes = await request("index.php", getData, "GET");
				this.banshiContent = getBsRes.data;
			},

			// 常见问题请求
			async getQuestion(value) {
				let getData = {
					citycode: "wenda",
					action: "list",
					keywords: this.inputValue,
					pagesize: 10,
					city: this.city.cityname,
					ordertype: value
				}
				let getRes = await request("index.php", getData, "GET");
				this.quesContent = getRes.data;
			},

			// 热词触发搜索
			searchKey(value) {
				this.$refs.question.reLoad();
				this.$refs.service.reLoad();
				this.$refs.news.reLoad();
				this.$refs.banshi.reLoad();
				if (value) {
					this.inputValue = value;
					this.keyValue = value;
				}
				if (!this.inputValue == "") {
					// 点击搜索后隐藏键盘
					uni.hideKeyboard();

					// 请求数据
					this.getFenci();
					this.getFuwu();
					this.getBsRequest();
					this.getZixun();
					this.getQuestion();
																					   
					// 请求数据完成后加载页面
					uni.showLoading({
						title: "加载中"
					})
					setTimeout(() => {
						this.showChange = false;
						if (this.fuwuContent.length == 0 && this.zixunContent.length == 0 && this.banshiContent
							.length == 0 && this.quesContent.length == 0) {
							this.showNone = true;
							this.$refs.question.noneData = false;
							this.$refs.service.noneData = false;
							this.$refs.news.noneData = false;
							this.$refs.banshi.noneData = false;
						}
						uni.hideLoading();
					}, 1000)
				}
			}
		}
	}
</script>

<style lang="stylus" >
@import '../../common.styl'
</style>
